<template>
  <div>
    <div class="activity-form">
      <el-form>
          <el-form-item label="活动名称">
            <el-select v-model="activity_form.activityId" placeholder="活动名称" @change="activityChart">
              <el-option
                v-for="item in activityName"
                :key="item.activityId"
                :label="item.activityName"
                :value="item.activityId">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-main>
      <div class="activity-title">
         <div class="title">活动效果</div>
         <el-row style="margin-top: 20px">
           <el-col :span="4" class="header-data" v-for="item in dataHeadArr" :key="item">
              <div>
                 <img :src="item.imgUrl">
              </div>
              <ul>
                <li>{{item.dric}}</li>
                <li>
                  <countTo
                    :startVal="0"
                    :endVal="item.num"
                    :duration="2000"
                    class="card-panel-num"
                  ></countTo>
                </li>
              </ul>
              <div class="line"></div>
           </el-col>

         </el-row>
         <div class="hr"></div>
      </div>
      <div>
         <div v-if="controlData=='' " class="nodata">
           <chart
            class="chart_box"
            :options="ctrolEmpyData"
            :auto-resize="true"
          ></chart>
         </div>
         <chart
            v-else
            class="chart_box"
            :options="controlData"
            :auto-resize="true"
          ></chart>

      </div>
      <div class="hr" style="margin:20px;"></div>
      <div>
         <div v-if="salemanContribute==''" class="nodata">
           <chart
            class="chart_box"
            :options="salemanEmpyData"
            :auto-resize="true"
          ></chart>
         </div>
         <chart
            v-else
            class="chart_box"
            :options="salemanContribute"
            :auto-resize="true"
          ></chart>

      </div>
    </el-main>
  </div>
</template>

<script>
import {getActivityNames,activityReportTotals} from '@/service/api/index'
import countTo from "vue-count-to";
export default {
  components:{
    countTo
  },
  data(){
    return {
       activity_form:{
         activityId:''
       },
       sortDate:[],
       salemanNameList:[],
       activityName:[],
       dataHeadArr : [],
       controlData:{},  //活动监控
       control:{
        sign_up:[],  //报名组数
        add:[],     //新增线索
        hotClue:[],  // 加热线索
        order:[],  //下单量
        dealOrder:[],  //成交量
        activityInvite:[], //邀约量
        salemanName:[],   //销售顾问
        sign_in:[],    //签到人数
        controlDate:[],    //时间
       },
       timeLine:[],
       ctrolEmpyData:{},
       salemanEmpyData:{},
       salesNumData:{
          activityInvite:[],
          sign_up:[],
          sign_in:[],
          add:[],
          hot:[],
          salesman:[],
          order:[],
          dealOrder:[]
       },
       salemanContribute:{},  // 顾问贡献

    }
  },
  created () {
    this.activity_form.activityId=sessionStorage.getItem('activityId');
    this.getActivityName();

    let that=this;
    setTimeout(function(){
      that.chartInit()
    },500)

  },
  methods: {
    getActivityName(){
      getActivityNames().then(res=>{
        if(res.code==0){
          this.activityName=res.data;
          if(this.activity_form.activityId=="" || this.activity_form.activityId==null){
            this.activity_form.activityId=res.data[0].activityId
          }
        }else{
           this.$notify({
            message: res.errMsg,
            type: "error",
          });
        }
      })
    },
    summation(data){  //求和
      let s = 0;
      data.forEach(function(val) {
        s += val;
      }, 0);
      return s;
    },
    activityChart(value){   //活动选择
      let that=this;
      this.activity_form.activityId=value
      setTimeout(function(){
        that.chartInit()
      },500)
    },
    chartInit(){
      let data={
        activityId:this.activity_form.activityId
      }
      activityReportTotals(data).then(res=>{
        if(res.code==0){
          if(res.data==''){
            this.controlData="";
            this.salemanContribute="";
            this.dataHeadArr=[]
            this.empyData()
            return
          }
          let list=res.data[0]
          let salesmanList=res.data[1]
          this.timeLine=res.data[2]
          //先清
          let allData={}
          this.salesNumData={
            activityInvite:[],
            sign_up:[],
            sign_in:[],
            add:[],
            hot:[],
            salesman:[],
            order:[],
            dealOrder:[]
          }
           this.control={
            sign_up:[],
            add:[],
            hotClue:[],
            order:[],
            dealOrder:[],
            activityInvite:[],
            salemanName:[],
            sign_in:[],
            controlDate:[],
          }


          //在赋值
          //统计
          list.forEach((item)=>{
              this.control.add.push(item.addClueCount)
              this.control.hotClue.push(item.existClueCount)
              this.control.order.push(item.orderCount);
              this.control.dealOrder.push(item.orderDealCount)
          });
          // 活动检测折线
          for(let key  in this.timeLine){
                this.control.activityInvite.push(this.timeLine[key].activityInviteCount)
                this.control.sign_up.push(this.timeLine[key].signUpCount)
                this.control.controlDate.push(key.split('T')[0]);
          }
          //顾问贡献
          salesmanList.forEach((item)=>{
            this.salesNumData.salesman.push(item.salesmanName);
            this.salesNumData.activityInvite.push(item.activityInviteCount)
            this.salesNumData.sign_up.push(item.signUpCount)
            this.salesNumData.sign_in.push(item.signInCount)
            this.salesNumData.add.push(item.addClueCount)
            this.salesNumData.hot.push(item.existClueCount)
            this.salesNumData.order.push(item.orderCount)
            this.salesNumData.dealOrder.push(item.orderDealCount)
           })

          allData.controlActivity =this.control.activityInvite;
          allData.signUpCount=this.control.sign_up;
          //去重
         // let signUp = [...new Set(this.control.sign_up)]
          allData.sortDate= this.control.controlDate
          allData.salesman=this.salesNumData.salesman;
          allData.activityInvite=this.salesNumData.activityInvite;
          allData.sign_up=this.salesNumData.sign_up;
          allData.sign_in=this.salesNumData.sign_in;
          allData.add=this.salesNumData.add;
          allData.hot=this.salesNumData.hot;
          allData.order=this.salesNumData.order;
          allData.dealOrder=this.salesNumData.dealOrder;
          // console.log(allData)
          this.controlChart(allData)
          //活动效果统计
          this.dataHeadArr=[
            {
              dric: "报名组数",
              imgUrl: require("../../assets/images/activity/pv.png"),
              num:  this.summation(this.control.sign_up),
            },
            {
              dric: "新增线索",
              imgUrl: require("../../assets/images/activity/uv.png"),
              num: this.summation(this.control.add),
            },
            {
              dric: "加热线索",
              imgUrl: require("../../assets/images/activity/users.png"),
              num: this.summation(this.control.hotClue),
            },
            {
              dric: "下单量",
              imgUrl: require("../../assets/images/activity/add.png"),
              num: this.summation(this.control.order),
            },
            {
              dric: "成交量",
              imgUrl: require("../../assets/images/activity/hot.png"),
              num: this.summation(this.control.dealOrder),
            }
          ]

        }else{
           this.$notify({
            message: res.errMsg,
            type: "error",
          });
        }
      })
    },
    controlChart(allData){
      //活动检测
      this.controlData={
        color:['#3B86FF','#00C456'],
        title: {
            text: '活动监控',
            padding:[0,20]
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['邀约量','报名组数']
        },
        dataZoom: [
          {}
        ],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: allData.sortDate
        },
        yAxis: {
            type: 'value',
        },
        series: [
           {
                name: '邀约量',
                type: 'line',
                data: allData.controlActivity
            },
            {
                name: '报名组数',
                type: 'line',
                data: allData.signUpCount
            }
        ]
      }
      //顾问贡献
      this.salemanContribute={
        color:['#3B86FF','#00C456','#FFBE00','#FF7065','#DB3A36','#545371','#8786A1'],
        title:{
           text: '顾问贡献',
           padding:[0,20]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            //data: ['转发量', '邀约量', '参与量', '新增线索量', '加热线索量','活动线索下定量','活动线索成交量']
        },
        xAxis: {
           type: 'value',
        },
        yAxis: {
            type: 'category',
            data:allData.salesman,
            max:5
        },
        series: [
            {
                name: '邀约量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },

                data: allData.activityInvite
            },
            {
                name: '报名组数',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.sign_up
            },
            {
                name: '签到人数',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.sign_in
            },
            {
                name: '新增线索量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.add
            },
            {
                name: '加热线索量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.hot
            },
            {
                name: '下单量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.order
            },
            {
                name: '成交量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: allData.dealOrder
            }
        ]
      }

    },
    empyData(){
      // 无数据 空状态
        this.dataHeadArr=[
        {
          dric: "报名组数",
          imgUrl: require("../../assets/images/activity/pv.png"),
          num: 0,
        },
        {
          dric: "新增线索",
          imgUrl: require("../../assets/images/activity/uv.png"),
          num:0,
        },
        {
          dric: "加热线索",
          imgUrl: require("../../assets/images/activity/users.png"),
          num: 0,
        },
        {
          dric: "下单量",
          imgUrl: require("../../assets/images/activity/add.png"),
          num:0,
        },
        {
          dric: "成交量",
          imgUrl: require("../../assets/images/activity/hot.png"),
          num:0,
        }
      ]
       this.ctrolEmpyData={
        color:['#3B86FF','#00C456'],
        title: {
            text: '活动监控',
            padding:[0,20]
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['邀约量','报名组数']
        },
        dataZoom: [
          {}
        ],
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:[0,0,0,0,0]
        },
        yAxis: {
            type: 'value',
        },
        series: [
           {
                name: '邀约量',
                type: 'line',
                data: [0,0,0,0,0,0]
            },
            {
                name: '报名组数',
                type: 'line',
                data: [0,0,0,0,0,0]
            }
        ]
      }
      //顾问贡献
      this.salemanEmpyData={
        color:['#3B86FF','#00C456','#FFBE00','#FF7065','#DB3A36','#545371','#8786A1'],
        title:{
           text: '顾问贡献',
           padding:[0,20]
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
        },
        xAxis: {
           type: 'value',
        },
        yAxis: {
            type: 'category',
            data: [0,0,0,0],
            max:5
        },
        series: [
            {
                name: '邀约量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },

                data:  [0,0,0,0]
            },
            {
                name: '报名组数',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  [0,0,0,0]
            },
            {
                name: '签到人数',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  [0,0,0,0]
            },
            {
                name: '新增线索量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  [0,0,0,0]
            },
            {
                name: '加热线索量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [0,0,0,0]
            },
            {
                name: '下单量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  [0,0,0,0]
            },
            {
                name: '成交量',
                type: 'bar',
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data:  [0,0,0,0]
            },
        ]
      }
    }
  }
}
</script>

<style scoped>
  .el-main{
    padding: 0
  }
  /deep/ .el-row{
    margin: 0
  }
  /* /deep/ .el-header{
    height: 120px;
  } */
  .activity-form{
    background: #F5F6FA;
    padding: 10px 20px;
  }
  /deep/ .el-form-item{
    margin-bottom:0
  }
  /deep/ .el-form-item__label{
    font-size: 18px;
  }
  .activity-title{
    margin: 20px;
  }
  .activity-title .title{
    font-size: 18px;
    font-weight: bold;
  }
  .header-data{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .header-data .line{
    height: 38px;
    border-right: 1px solid #E8E8E8;
    margin-left: 60px;
  }
  .header-data:last-child .line{
    display: none
  }
  .header-data ul{
    margin-left: 20px;
  }
  .header-data ul li:first-child{
    font-size: 14px;
    color: #000;
    opacity: 0.45;
  }
  .header-data ul li:last-child{
    font-size: 24px;
    color: #000;

  }
  .hr{
    border-top: 1px solid #E9E9F0;
    margin: 20px 0;
  }
  .chart_box{
    width: 100%;
  }
  .nodata{
    display: flex;
    justify-content: center;
    align-items: center;
    color:#999;
  }
  .header-data img{
    width: 50px;
    height: 50px;
  }
</style>
